<template>
  <div class="container">
    <div class="keyword_a">
      <router-link :to="`/qwe/search/1002/${this.keyword}`"
        >搜"{{ keyword }}"相关的用户</router-link
      ><span>></span>
    </div>
    <div class="keyword_b q" v-if="Single">
      <h3>单曲</h3>
      <ul>
        <li v-for="(v, i) in Single" :key="i">
          <router-link :to="`/songinfo/${v.id}`"
            >{{ v.name }}-{{ v.artists[0].name }}</router-link
          >
        </li>
      </ul>
    </div>
    <div class="keyword_c q" v-if="Singer">
      <h3>歌手</h3>
      <ul>
        <li v-for="(v, i) in Singer" :key="i">
          <router-link :to="`/singerInfo/${v.id}`">{{ v.name }}</router-link>
        </li>
      </ul>
    </div>
    <div class="keyword_d q" v-if="Album">
      <h3>专辑</h3>
      <ul>
        <li v-for="(v, i) in Album" :key="i">
          <router-link :to="`/albuminfo/${v.id}`">{{ v.name }}-{{ v.artist.name }}</router-link>
        </li>
      </ul>
    </div>
    <div class="keyword_e q" v-if="SongSheet">
      <h3>歌单</h3>
      <ul>
        <li v-for="(v, i) in SongSheet" :key="i">
          <router-link :to="`/songlist/${v.id}`">{{ v.name }}</router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  props: ["keyword"],
  data() {
    return {
      // 单曲数据
      Single: {},
      // 歌手数据
      Singer: {},
      // 专辑数据
      Album: {},
      // 歌单数据
      SongSheet: {},
    };
  },
  methods: {
    // 获取搜索提示框信息
    keywords() {
      axios
        .get(`http://127.0.0.1:3000/search/suggest?keywords=${this.keyword}`)
        .then((res) => {
          if (res.data.code === 200) {
            this.Single = res.data.result.songs;
            this.Singer = res.data.result.artists;
            this.Album = res.data.result.albums;
            this.SongSheet = res.data.result.playlists;
          }
        });
    },
  },
  watch: {
    keyword() {
      this.keywords();
    },
  },
  created() {
    this.keywords();
  },
};
</script>
<style scoped>
/* 提示框 */
.container {
  width: 100%;
  font-size: 12px;
  background-color: #fff;
  z-index: 100;
}
.container .keyword_a {
  padding: 10px;
  color: #666666;
  border-bottom: 1px solid #e2e2e2;
}
.container .keyword_a a {
  color: #666666;
}
.container .q {
  display: flex;
}
.container .q h3 {
  width: 63px;
  padding-top: 10px;
  padding-left: 10px;
  flex-shrink: 0;
  border-right: 1px solid #e2e2e2;
  font-size: 12px;
  font-weight: 400;
}
.container .q ul {
  width: 100%;
  padding: 4px 0;
  overflow: hidden;
  border-bottom: 1px solid #e2e2e2;
}
.container .q ul li {
  width: 100%;
}
.container .q ul li:hover {
  background-color: #e3e5e7;
}
.container .q ul li a {
  display: block;
  width: 100%;
  padding: 5px 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.container .q:nth-child(odd) ul {
  background-color: #f9f8f8;
}
</style>